<template>
  <div class="container">
    <div v-show="!showUpdate">
      <div style="text-align:center;">
        <h3>功能区详情</h3>
      </div>
      <hr />
      <table>
        <tr class="_tr">
          <td align="left" style="widtd:200px">
            <span>功能区编号：</span>
          </td>
          <td align="left" style>
            <span>{{areaDetails.id}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>功能区名称：</span>
          </td>
          <td align="left">
            <span>{{areaDetails.name}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>功能区英文名称：</span>
          </td>
          <td align="left">
            <span>{{areaDetails.english_name}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>电话：</span>
          </td>
          <td align="left">
            <span>{{areaDetails.telephone}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>描述：</span>
          </td>
          <td align="left">
            <span>{{areaDetails.discription}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>创建时间：</span>
          </td>
          <td align="left">
            <span>{{areaDetails.create_time}}</span>
          </td>
        </tr>
        <tr>
          <td style="text-align:center;height:100px;" colspan="2" rowspan="2">
            <el-button type="primary" @click="update" v-if="showButton">修改</el-button>
            <el-button type="danger" @click="deleteCompus" v-if="showButton">删除</el-button>
            <el-button type="primary" @click="back">返回</el-button>
          </td>
        </tr>
      </table>
      <el-switch v-model="showButton" active-text="admin" inactive-text="editor"></el-switch>
    </div>
    <!-- 修改功能区详情 -->
    <div v-show="showUpdate">
      <update ref="update" :areaDetails="areaDetails" @closeUpdate="closeUpdate" />
    </div>
  </div>
</template>

<script>
import update from "@/views/education-collegeField/area/update";
export default {
  name: "areaDetails",
  props: {
    areaDetails: Object,
  },
  data() {
    return {
      showUpdate: false, //修改功能区信息的组件显示
      showButton: true, //显示权限按钮否
    };
  },
  components: {
    update,
  },
  methods: {
    //返回则关闭对话框
    back() {
      this.$emit("closeDetailDialog", false);
    },

    //修改功能区信息
    update() {
      this.$refs.update.reset();
      this.showUpdate = true;
    },

    //修改组件传过来的数据,关闭修改组件显示
    closeUpdate(val) {
      this.showUpdate = val;
    },

    //删除该功能区
    deleteCompus() {
      this.$alert("删除功能区", "删除成功", {
        confirmButtonText: "确定",
        callback: (action) => {
          //删除成功，返回页面
          this.$emit("closeDetailDialog", false);
        },
      });
    },
  },
};
</script>

<style scoped>
h3 {
  font-weight: 500;
}
span {
  font-weight: 400;
}
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
table {
  width: 800px;
  border: 0;
  margin: 50px auto 0;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}
table td {
  background: #fafbfc;
  font-weight: bolder;
  line-height: 40px;

  border: 1px solid #eee;
}
._tr:hover td {
  background-color: skyblue;
}
</style>
